<!DOCTYPE html>
<html lang="en">
<head>
    <title>修改员工信息表单$</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">
    <link rel="stylesheet" href="/layui-util/css/layui.css" media="all">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/layui-util/layui.js" charset="utf-8"></script>
    <script src="/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
    <style>
        select.error, input.error {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<script src="/js/webSocket.js"></script>
<section id="container">
    <section class="panel" style="width: 350px;margin: 0 auto">
        <header class="panel-heading">
            <h3>修改员工基本信息</h3>
        </header>
        <div class="panel-body">
            <div class="form" id="app">
                <form class="cmxform form-horizontal" id="updateEmpForm">
                    <input type="hidden" value="${emp1.euuId}" id="euuId" name="euuId">
                    <div class="form-group ">
                        <label for="empName" class="control-label col-lg-3">姓名</label>
                        <div class="col-lg-6">
                            <input class=" form-control" id="empName" name="empName" type="text"
                                   value="${emp1.empName}" autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="empPhone" class="control-label col-lg-3">电话</label>
                        <div class="col-lg-6">
                            <input class=" form-control" id="empPhone" name="empPhone" type="text"
                                   value="${emp1.empPhone}" autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="empBirthday" class="control-label col-lg-3">出生日期</label>
                        <div class="col-lg-6">
                            <div class="layui-input-inline">
                                <input class=" form-control" id="empBirthday" name="empBirthday"
                                       type="text" autocomplete="off" value="${emp1.empBirthday}">
                            </div>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="empHireDate" class="control-label col-lg-3">入职时间</label>
                        <div class="col-lg-6">
                            <div class="layui-input-inline">
                                <input class="form-control" id="empHireDate" name="empHireDate"
                                       type="text" autocomplete="off" value="${emp1.empHireDate}">
                            </div>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="empAddress" class="control-label col-lg-3">现住地址</label>
                        <div class="col-lg-6">
                            <input class=" form-control" id="empAddress" name="empAddress" type="text"
                                   value="${emp1.empAddress}" autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="buuid">支点</label>
                        <select name="buuid" style="width: 100px;height: 35px;margin-left: 24px" v-model="Branch">
                            <option v-for="(item,index) in result1" v-bind:value="item.buuid">
                                {{item.bname}}
                            </option>
                        </select>
                        <label for="ruuid">角色</label>
                        <select name="ruuid" style="width: 100px;height: 35px;margin-left: 24px" v-model="Role">
                            <option v-for="(item,index) in result2" v-bind:value="item.ruuid">
                                {{item.rname}}
                            </option>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-offset-3 col-lg-6">
                            <button class="btn btn-primary" type="button" id="referBut">提交</button>
                            <button class="btn btn-primary" type="button" id="cancelBut">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
</section>
</body>
</html>
<script>
    /*加载时触发*/
    var app = new Vue({
        el: "#app",
        data: {
            result1: [],
            result2: [],
            Branch: "${emp1.branch.buuid}",
            Role: "${emp1.role.ruuid}"
        }
    });
    var getBranchList = function () {
        $.ajax({
            url: "/emp/doGetBranchList",
            type: "post",
            dataType: "json",
            success: function (data) {
                app.result1 = data.branchList;
            }
        });
    };
    var getRoleList = function () {
        $.ajax({
            type: "POST",
            url: "/emp/getAllRole",
            dataType: "json",
            success: function (data) {
                app.result2 = data.roleList;
            }
        });
    };
    getBranchList();
    getRoleList();
    /*点击事件*/
    var updateEmp = function () {
        if (!check().form()) {
            return;
        }
        $.ajax({
            url: "/emp/toUpdateEmp",
            type: "post",
            data: $("#updateEmpForm").serialize(),
            success: function () {
                layer.msg('修改成功', {icon: 6});
                $("#cancelBut").click();
            }
        });
    };
    var check = function () {
        jQuery.validator.addMethod("regex", function (value, element, params) {
            var exp = new RegExp(params);
            return exp.test(value);
        }, "格式错误");
        /*时间大小比较*/
        jQuery.validator.methods.compareDate = function (value, element, param) {
            var startDate = jQuery(param).val();
            return startDate < value;
        };
        return $("#updateEmpForm").validate({
            rules: {
                empName: {
                    required: true,
                    rangelength: [2, 5]
                },
                empPhone: {
                    required: true,
                    regex: "^[1][3,4,5,7,8,9][0-9]{9}$"
                },
                empBirthday: {
                    required: true

                },
                empHireDate: {
                    required: true,
                    compareDate: "#empBirthday"
                },
                empAddress: {
                    required: true
                }
            },
            messages: {
                empName: {
                    required: "",
                    rangelength: "用户名长度为2-5之间"
                },
                empPhone: {
                    required: "",
                    regex: "手机号格式不正确"
                },
                empBirthday: {
                    required: ""
                },
                empHireDate: {
                    required: "",
                    compareDate: "入职时间必须大于出生时间"
                },
                empAddress: {
                    required: ""
                }
            }
        });
    };
    $("#referBut").click(function () {
        //ignore: ":hidden:not(select)";//解决无法校验select
        $("#referBut").submit();//button按钮变为submit
        updateEmp();
    });
    $("#cancelBut").click(function () {
        var index = parent.layer.getFrameIndex(window.name);
        parent.getEmpByPageList();
        parent.layer.close(index);
    });
    $("#updateEmpForm").click(function () {
        if (!check().form()) {
            return;
        }
    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#empBirthday',
            type: 'date'
        });
        laydate.render({
            elem: '#empHireDate',
            type: 'date'
        });
    });
</script>